<template xmlns="">
    <div class="container">
        <div class="logo_we">
            <a href="https://open.work.weixin.qq.com" target="_blank"
                ><img
                    src="https://open.work.weixin.qq.com/service/img?id=ww0e03bf4b94e4f88e&t=isp&c=white&s=small"
                    srcset="
                        https://open.work.weixin.qq.com/service/img?id=ww0e03bf4b94e4f88e&t=isp&c=white&s=small@2x 2x
                    "
                    referrerpolicy="unsafe-url"
                    alt="企业微信"
            /></a>
        </div>
        <!-- 登录区域 -->
        <div class="content">
            <div class="field">
                <!-- [移动端]标题 -->
                <h2 class="mobile-title">
                    <h3 class="title">销售小助手</h3>
                </h2>

                <!-- 表单 -->
                <div class="form-cont">
                    <div>
                        <el-form
                            ref="loginForm"
                            :model="loginForm"
                            :rules="LoginRules"
                            class="login-form"
                        >
                            <el-form-item>
                                <span @click="install">安装体验</span>
                            </el-form-item>
                            <el-form-item prop="tenantName" v-if="tenantEnable">
                                <el-select
                                    v-model="loginForm.tenantName"
                                    placeholder="请选择租户"
                                >
                                    <el-option
                                        icon-class="el-icon-s-custom"
                                        label="耀保"
                                        value="ww0e03bf4b94e4f88e"
                                        ><i class="el-icon-user-solid">
                                            耀保</i
                                        ></el-option
                                    >
                                    <el-option
                                        label="霞米"
                                        value="wpMHz2OwAAlXLCOPSTdrAA-y_IAp7YTw"
                                        ><i class="el-icon-user-solid">
                                            霞米</i
                                        ></el-option
                                    >
                                </el-select>
                            </el-form-item>
                            <!-- 账号密码登录 -->
                            <div v-if="loginForm.loginType === 'uname'">
                                <el-form-item prop="username">
                                    <el-input
                                        v-model="loginForm.username"
                                        auto-complete="off"
                                        placeholder="账号"
                                    >
                                        <template slot="prepend"
                                            ><i class="el-icon-user-solid"></i
                                        ></template>
                                        <el-select
                                            v-model="loginForm.username"
                                            slot="append"
                                            placeholder="请选择用户"
                                        >
                                            <el-option
                                                v-for="(
                                                    item, index
                                                ) in usernameList"
                                                :key="index"
                                                :label="item.username"
                                                :value="item.username"
                                            />
                                        </el-select>
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="password">
                                    <el-input
                                        v-model="loginForm.password"
                                        type="password"
                                        auto-complete="off"
                                        placeholder="密码"
                                        @keyup.enter.native="getCode"
                                    >
                                        <svg-icon
                                            slot="prefix"
                                            icon-class="password"
                                            class="el-input__icon input-icon"
                                        />
                                    </el-input>
                                </el-form-item>
                                <el-checkbox
                                    v-model="loginForm.rememberMe"
                                    style="margin: 0 0 25px 0"
                                    >记住密码</el-checkbox
                                >
                            </div>

                            <!-- 短信验证码登录 -->
                            <div v-if="loginForm.loginType === 'sms'">
                                <el-form-item prop="mobile">
                                    <el-input
                                        v-model="loginForm.mobile"
                                        type="text"
                                        auto-complete="off"
                                        placeholder="请输入手机号"
                                    >
                                        <svg-icon
                                            slot="prefix"
                                            icon-class="phone"
                                            class="el-input__icon input-icon"
                                        />
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="mobileCode">
                                    <el-input
                                        v-model="loginForm.mobileCode"
                                        type="text"
                                        auto-complete="off"
                                        placeholder="短信验证码"
                                        class="sms-login-mobile-code-prefix"
                                        @keyup.enter.native="handleLogin"
                                    >
                                        <template>
                                            <svg-icon
                                                slot="prefix"
                                                icon-class="password"
                                                class="el-input__icon input-icon"
                                            />
                                        </template>
                                        <template slot="append">
                                            <span
                                                v-if="mobileCodeTimer <= 0"
                                                class="getMobileCode"
                                                @click="getSmsCode"
                                                style="cursor: pointer"
                                                >获取验证码</span
                                            >
                                            <span
                                                v-if="mobileCodeTimer > 0"
                                                class="getMobileCode"
                                                >{{
                                                    mobileCodeTimer
                                                }}秒后可重新获取</span
                                            >
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </div>

                            <!-- 下方的登录按钮 -->
                            <el-form-item style="width: 100%">
                                <el-button
                                    :loading="loading"
                                    size="medium"
                                    type="primary"
                                    style="width: 100%"
                                    @click.native.prevent="getCode"
                                >
                                    <span v-if="!loading">登 录</span>
                                    <span v-else>登 录 中...</span>
                                </el-button>
                            </el-form-item>

                            <!--  社交登录 -->
                            <el-form-item style="width: 100%">
                                <div class="oauth-login" style="display: flex">
                                    <div
                                        class="oauth-login-item"
                                        v-for="item in SysUserSocialTypeEnum"
                                        :key="item.type"
                                        @click="doSocialLogin(item)"
                                    >
                                        <img
                                            :src="item.img"
                                            height="25px"
                                            width="25px"
                                            alt="登录"
                                        />
                                        <span>{{ item.title }}</span>
                                    </div>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
        <!-- footer -->
        <div class="footer">
            沪ICP备2023015777号 Copyright © 上海耀保信息科技有限公司 All Rights
            Reserved.
        </div>
    </div>
</template>

<script>
import { sendSmsCode, findLoginParam } from '@/api/login'
import { getTenantIdByName } from '@/api/system/tenant'
import { SystemUserSocialTypeEnum } from '@/utils/constants'
import {
    getCaptchaEnable,
    getTenantEnable,
    getLoginEnable
} from '@/utils/iyaobao'
import {
    getPassword,
    getRememberMe,
    getTenantName,
    getUsername,
    removePassword,
    removeRememberMe,
    removeTenantName,
    removeUsername,
    setPassword,
    setRememberMe,
    setTenantId,
    setTenantName,
    setUsername
} from '@/utils/auth'

import vueQr from 'vue-qr'

export default {
    name: 'Login',
    components: {
        vueQr
    },
    data() {
        return {
            logoSrc: '',
            wloginQr: '',
            winstallThirdAppQr: '',
            captchaEnable: false,
            tenantEnable: true,
            mobileCodeTimer: 0,
            loginForm: {
                loginType: 'uname',
                username: '',
                password: '',
                captchaVerification: '',
                mobile: '',
                mobileCode: '',
                rememberMe: false,
                tenantName: 'wpMHz2OwAAlXLCOPSTdrAA-y_IAp7YTw'
            },
            scene: 21,
            usernameList: [],
            LoginRules: {
                username: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '用户名不能为空'
                    }
                ],
                password: [
                    { required: true, trigger: 'blur', message: '密码不能为空' }
                ],
                mobile: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '手机号不能为空'
                    },
                    {
                        validator: function (rule, value, callback) {
                            if (
                                /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/.test(
                                    value
                                ) === false
                            ) {
                                callback(new Error('手机号格式错误'))
                            } else {
                                callback()
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                tenantName: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '租户不能为空'
                    },
                    {
                        validator: (rule, value, callback) => {
                            // debugger
                            getTenantIdByName(value).then(res => {
                                console.log(res)
                                const tenantId = res.data.id
                                if (tenantId && tenantId >= 0) {
                                    // 设置租户
                                    setTenantId(tenantId)
                                    this.usernameList = res.data.userList
                                    this.loginForm.password = '123456'
                                    callback()
                                } else {
                                    callback('租户不存在')
                                }
                            })
                        },
                        trigger: 'blur'
                    }
                ]
            },
            loading: false,
            redirect: undefined,
            // 枚举
            SysUserSocialTypeEnum: SystemUserSocialTypeEnum
        }
    },
    created() {
        // 租户开关
        this.tenantEnable = getTenantEnable()
        if (this.tenantEnable) {
            getTenantIdByName(this.loginForm.tenantName).then(res => {
                console.log(res)
                // 设置租户
                const tenantId = res.data.id
                if (tenantId && tenantId >= 0) {
                    setTenantId(tenantId)
                    this.usernameList = res.data.userList
                    this.loginForm.password = '123456'
                }
            })
        }
        // 验证码开关
        this.captchaEnable = getCaptchaEnable()
        // 重定向地址
        this.redirect = this.$route.query.redirect
            ? decodeURIComponent(this.$route.query.redirect)
            : undefined
        this.getCookie()
        this.findLoginParam()
    },
    methods: {
        findLoginParam() {
            findLoginParam(this.$route.query.redirect || '').then(res => {
                this.winstallThirdAppQr = res.data.winstallThirdAppQr
            })
        },
        install() {
            console.log(
                this.winstallThirdAppQr,
                'this.winstallThirdAppQr -------'
            )
            const { href } = this.$router.resolve({
                path: '/install',
                query: {
                    redirect_uri: encodeURI(this.winstallThirdAppQr)
                }
            })
            window.open(href, '_blank')
            // this.$router.push({
            //   path: "/install", // 路由名称
            //   query: {
            //     redirect_uri: this.winstallThirdAppQr,
            //   },
            // });
        },
        getCode() {
            // 情况一，未开启：则直接登录
            if (!this.captchaEnable) {
                this.handleLogin({})
                return
            }

            // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
            // 弹出验证码
            this.$refs.verify.show()
        },
        getCookie() {
            const username = getUsername()
            const password = getPassword()
            const rememberMe = getRememberMe()
            const tenantName = getTenantName()
            this.loginForm = {
                ...this.loginForm,
                username: username ? username : this.loginForm.username,
                password: password ? password : this.loginForm.password,
                rememberMe: rememberMe ? getRememberMe() : false,
                tenantName: tenantName ? tenantName : this.loginForm.tenantName
            }
        },
        handleLogin(captchaParams) {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    // 设置 Cookie
                    if (this.loginForm.rememberMe) {
                        setUsername(this.loginForm.username)
                        setPassword(this.loginForm.password)
                        setRememberMe(this.loginForm.rememberMe)
                        setTenantName(this.loginForm.tenantName)
                    } else {
                        removeUsername()
                        removePassword()
                        removeRememberMe()
                        removeTenantName()
                    }
                    this.loginForm.captchaVerification =
                        captchaParams.captchaVerification
                    // 发起登陆
                    // console.log("发起登录", this.loginForm);
                    this.$store
                        .dispatch(
                            this.loginForm.loginType === 'sms'
                                ? 'SmsLogin'
                                : 'Login',
                            this.loginForm
                        )
                        .then(() => {
                            this.$router
                                .push({ path: this.redirect || '/' })
                                .catch(() => {})
                        })
                        .catch(() => {
                            this.loading = false
                        })
                }
            })
        },
        async doSocialLogin(socialTypeEnum) {
            if (socialTypeEnum.type == '30') {
                window.location.href = this.wloginQr
            }
        },
        /** ========== 以下为升级短信登录 ========== */
        getSmsCode() {
            if (this.mobileCodeTimer > 0) return
            this.$refs.loginForm.validate(valid => {
                if (!valid) return
                sendSmsCode(
                    this.loginForm.mobile,
                    this.scene,
                    this.loginForm.uuid,
                    this.loginForm.code
                ).then(res => {
                    this.$modal.msgSuccess('获取验证码成功')
                    this.mobileCodeTimer = 60
                    let msgTimer = setInterval(() => {
                        this.mobileCodeTimer = this.mobileCodeTimer - 1
                        if (this.mobileCodeTimer <= 0) {
                            clearInterval(msgTimer)
                        }
                    }, 1000)
                })
            })
        }
    }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/login.scss';

.oauth-login {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.oauth-login-item {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.oauth-login-item img {
    height: 25px;
    width: 25px;
}

.oauth-login-item span:hover {
    text-decoration: underline red;
    color: red;
}

.sms-login-mobile-code-prefix {
    :deep(.el-input__prefix) {
        top: 22%;
    }
}
</style>
